<!DOCTYPE html>
<html>
<head>
    <title>Physics Diagram</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="480" style="border:1px solid #000;"></canvas>

<script>
    const canvas = document.getElementById('physicsCanvas');
    const ctx = canvas.getContext('2d');

    // Helper function to draw a vector with a filled arrowhead
    function drawArrow(ctx, fromX, fromY, toX, toY) {
        const headLength = 12;
        const dx = toX - fromX;
        const dy = toY - fromY;
        const angle = Math.atan2(dy, dx);

        // Draw the line
        ctx.beginPath();
        ctx.moveTo(fromX, fromY);
        ctx.lineTo(toX, toY);
        ctx.stroke();

        // Draw the arrowhead
        ctx.beginPath();
        ctx.moveTo(toX, toY);
        ctx.lineTo(toX - headLength * Math.cos(angle - Math.PI / 6), toY - headLength * Math.sin(angle - Math.PI / 6));
        ctx.lineTo(toX - headLength * Math.cos(angle + Math.PI / 6), toY - headLength * Math.sin(angle + Math.PI / 6));
        ctx.closePath();
        ctx.fillStyle = 'black';
        ctx.fill();
    }

    // --- Parameters ---
    const cx = 250;
    const cy = 220;
    const radius_a = 150;
    const radius_r = 80;

    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;

    // --- 1. Draw the main circle ---
    ctx.beginPath();
    ctx.arc(cx, cy, radius_a, 0, 2 * Math.PI);
    ctx.stroke();

    // --- 2. Define source points and draw radii ---
    // Angles in radians for the three sources
    const angle_s_bottom = Math.PI / 2;      // 90 degrees
    const angle_s_left = 7 * Math.PI / 6;   // 210 degrees
    const angle_s_right = 11 * Math.PI / 6;  // 330 degrees

    const s_bottom = { x: cx + radius_a * Math.cos(angle_s_bottom), y: cy + radius_a * Math.sin(angle_s_bottom) };
    const s_left = { x: cx + radius_a * Math.cos(angle_s_left), y: cy + radius_a * Math.sin(angle_s_left) };
    const s_right = { x: cx + radius_a * Math.cos(angle_s_right), y: cy + radius_a * Math.sin(angle_s_right) };
    
    // Draw radii to sources
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(s_bottom.x, s_bottom.y);
    ctx.moveTo(cx, cy);
    ctx.lineTo(s_left.x, s_left.y);
    ctx.moveTo(cx, cy);
    ctx.lineTo(s_right.x, s_right.y);
    ctx.stroke();

    // --- 3. Define mass 'm' and draw its position line ---
    const m_angle = -18 * Math.PI / 180; // -18 degrees, to place it in the 4th quadrant
    const mx = cx + radius_r * Math.cos(m_angle);
    const my = cy + radius_r * Math.sin(m_angle);

    // Draw line from origin to m
    ctx.beginPath();
    ctx.moveTo(cx, cy);
    ctx.lineTo(mx, my);
    ctx.stroke();
    
    // --- 4. Draw lines from sources to mass m ---
    ctx.beginPath();
    ctx.moveTo(s_left.x, s_left.y);
    ctx.lineTo(mx, my);
    ctx.moveTo(s_right.x, s_right.y);
    ctx.lineTo(mx, my);
    ctx.stroke();

    // --- 5. Draw the velocity vector 'v' ---
    const v_length = 90;
    const v_angle = 20 * Math.PI / 180; // 20 degrees, pointing up and right
    const vx = mx + v_length * Math.cos(v_angle);
    const vy = my + v_length * Math.sin(v_angle);
    drawArrow(ctx, mx, my, vx, vy);

    // --- 6. Draw dots at key points ---
    function drawDot(x, y) {
        ctx.beginPath();
        ctx.arc(x, y, 4, 0, 2 * Math.PI);
        ctx.fillStyle = 'black';
        ctx.fill();
    }
    drawDot(cx, cy);
    drawDot(s_bottom.x, s_bottom.y);
    drawDot(s_left.x, s_left.y);
    drawDot(s_right.x, s_right.y);
    drawDot(mx, my);

    // --- 7. Add labels ---
    ctx.fillStyle = 'black';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Italic labels for variables
    ctx.font = 'italic 20px Times New Roman';
    ctx.fillText('a', cx + 15, cy + radius_a * 0.5); // Bottom radius
    ctx.fillText('a', cx + radius_a * 0.5 * Math.cos(angle_s_left) + 20, cy + radius_a * 0.5 * Math.sin(angle_s_left)); // Top-left radius
    ctx.fillText('a', cx + radius_a * 0.5 * Math.cos(angle_s_right) - 20, cy + radius_a * 0.5 * Math.sin(angle_s_right)); // Top-right radius
    ctx.fillText('r', cx + radius_r * 0.5 * Math.cos(m_angle) - 5, cy + radius_r * 0.5 * Math.sin(m_angle) + 12); // r vector
    ctx.fillText('m', mx - 20, my - 10);
    ctx.fillText('v', vx - 15, vy - 20);

    // Regular font for caption
    ctx.font = '20px Times New Roman';
    ctx.fillText('Fig. 1.21.', cx, cy + radius_a + 45);

</script>

</body>
</html>